﻿@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

@section Heads{
    <environment include="Development">
        <link href="~/vendors/layX-2.x/layx.min.css" rel="stylesheet" />
        <link href="~/vendors/tabx-v0.0.1/tabx.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="~/vendors/ztree-v3.5.40/css/metroStyle/metroStyle.css" />
    </environment>
    <environment exclude="Development">
        <link href="~/vendors/layX-2.x/layx.min.css" rel="stylesheet" />
        <link href="~/vendors/tabx-v0.0.1/tabx.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="~/vendors/ztree-v3.5.40/css/metroStyle/metroStyle.css" />
    </environment>
}


@*最外层的盒子*@
<div id="cross-main" class="cross-page-flexbox cross-page-flex-column">
    @* container 布局 *@
    <div id="cross-index-container" class="cross-page-flex-item cross-page-flexbox cross-page-flex-row">
        @* 菜单布局 *@
        <div id="cross-index-menus" class="cross-page-flexbox cross-page-flex-column">
            @* logo 垂直布局 *@
            <div id="cross-index-logo" class="cross-page-flexbox cross-page-flex-vertical-center">
                <img src="~/images/CrossTech.png" id="cross-index-logo" alt="logo" title="logo" />
                <h3 id="cross-index-logo-label">Cross Technical</h3>
            </div>
            @* 菜单描述 *@
            <div id="cross-index-tree" class="cross-page-flex-item cross-page-flexbox cross-page-flex-column">
                <h3 class="cross-column-title">功能菜单</h3>
                <div id="cross-tree-functions" class="cross-page-flex-item ztree"></div>
            </div>
        </div>
        @* main布局 *@
    <div id="cross-index-main" class="cross-page-flex-item cross-page-flexbox cross-page-flex-column">
        <div id="cross-index-head" class="cross-page-flexbox cross-page-flex-row">
            <div class="cross-head-button cross-page-flex-center" id="cross-index-switch-menu">
                <svg class="cross-icon" aria-hidden="true"><use xlink:href="#apj-icon-caidan"></use></svg>
            </div>
            <div class="cross-head-button cross-page-flexbox cross-page-flex-center" id="cross-index-refresh">
                <svg class="cross-icon" aria-hidden="true"><use xlink:href="#apj-icon-shuaxin"></use></svg>
            </div>
            <div id="cross-frame-tabs" class="cross-page-flex-item">
                
            </div>

        </div>
        <div id="cross-index-page" class="cross-page-flex-item">
            @*<h1> index page</h1>*@

        </div>
        <div id="cross-index-log"></div>

    </div>
    </div>
    @* footer *@
<div id="cross-index-status">
    <div class="cross-status-group">
        <label class="cross-status-label">操作员: </label>
        <span class="apjcrossstatus-span apj-tip-text">APJ-加变量</span>
    </div>
    <div class="cross-status-group">
        <label class="cross-status-label">登录时间: </label>
        <span class="cross-status-span">2019-04-16 13:48:11</span>
    </div>
    <div class="cross-status-group cross-status-group-right">
        <span class="cross-status-span">v1.0.0</span>
    </div>
    <div class="cross-status-group cross-status-group-right">
        <span class="cross-status-span">&copy; 珠海Cross软件有限公司</span>
    </div>
</div>

</div>


@section Scripts{
    <environment include="Development">
        <script src="~/vendors/layX-2.x/layx.min.js"></script>
        <script src="~/vendors/tabx-v0.0.1/tabx.min.js"></script>
        <script type="text/javascript" src="~/vendors/ztree-v3.5.40/js/jquery.ztree.all.js"></script>
    </environment>
    <environment exclude="Development">
        <script src="~/vendors/layX-2.x/layx.min.js"></script>
        <script src="~/vendors/tabx-v0.0.1/tabx.min.js"></script>
        <script type="text/javascript" src="~/vendors/ztree-v3.5.40/js/jquery.ztree.all.min.js"></script>
    </environment>

    <script>
        function setFontCss(treeId, treeNode) {
            return treeNode.level == 0 ? { color: "#3498db" } : {};
        };

        var setting = {
            view: {
                fontCss: setFontCss
            },
            async: {
                url: '/?handler=Menus',
                enable: true,
                headers: {
                    "X-CSRF-TOKEN": apj.getCookie("XSRF-TOKEN")
                },
                dataType: 'json',
                type: 'post',
                autoParam: ["id"]
            },
            data: {
                key: {
                },
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "parentId",
                    rootPId: null
                }
            },
            callback: {
                onClick: function (event, treeId, treeNode, clickFlag) {
                    if (treeNode.link) {
                        tabx.open({
                            container: ["#cross-frame-tabs", "#cross-index-page"],
                            item: {
                                id: treeNode.uniqueId,
                                title: treeNode.name,
                                url: treeNode.link,
                                useSubTitle: true
                            }
                        });
                    }
                }
            }
        };

        window.addEventListener("DOMContentLoaded", function () {
            tabx.open({
                container: ["#cross-frame-tabs", "#cross-index-page"],
                item: {
                    id: 'console',
                    title: '控制台',
                    url: '/Console',
                    useSubTitle: true,
                    closable: false
                }
            });
        });

        //var tabActiveClass = "apj-frame-tab-active";
        //var frameActiveClass = "apj-frame-content-active";
        var $treeGrid;
        $(function () {
            $treeGrid = $.fn.zTree.init($("#cross-tree-functions"), setting);

            //鼠标移入移出
            $(".cross-head-button").on({
                mouseenter: function () {
                    var $this = $(this);
                    $this.children(".apj-head-droplist").addClass("apj-head-droplist-active");
                },
                mouseleave: function () {
                    var $this = $(this);
                    $this.children(".apj-head-droplist").removeClass("apj-head-droplist-active");
                }
            });

            $("#cross-index-switch-menu").on("click", function () {
                var $this = $(this);
                if (!$this.hasClass("cross-head-button-high")) {
                    $this.addClass("cross-head-button-high");
                    $("#cross-index-menus").addClass("cross-index-menus-inactive");
                }
                else {
                    $this.removeClass("cross-head-button-high");
                    $("#cross-index-menus").removeClass("cross-index-menus-inactive");
                }
            });

            $("#apj-swith-language").on("click", ".apj-head-drop-item", function (ev) {
                var $this = $(this);
                var culture = $this.attr("data-value");
                var returnUrl = $this.attr("data-returnUrl");
                if (culture && returnUrl) {
                    top.window.location.href = "?handler=SetLanguage&culture=" + culture + "&returnUrl=" + returnUrl;
                }
            });

            $("#apj-index-refresh").on("click", function () {
                var currentItem = tabx.item;
                if (currentItem && currentItem.content && currentItem.content.contentWindow) {
                    currentItem.content.contentWindow.location.reload();
                }
            });
        });
    </script>
}





